{% load static %}
{% load get_like_num %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hot_discussion</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="{% static 'font-awesome-4.7.0/css/font-awesome.min.css' %}">
    <link rel="stylesheet" href="{% static 'login/css/style.css' %}">
    <style>
        span.active {
            color: red;
        }
    </style>
</head>
<body>
<!--头部-->
<header class="header">
    <nav class="navbar navbar-expand-lg fixed-top shadow navbar-light bg-white">
        <div class="container-fluid">
            <!--弹性盒子设置-->
            <div class="d-flex align-items-center">
                <!--logo-->
                <!--navbar-brand图片自适应导航栏-->
                <a href="/index/" class="navbar-brand">
                    <img src="{% static 'login/image/logo.png' %}" alt="Directory logo">
                </a>
                <!--搜索栏-->
                <form action="/search/" id="search" class="form-inline" method="get">
                    {% csrf_token %}
                    <div class="ml-lg-2 ml-xl-3">
                        <input type="text" name="search" id="search_search" placeholder="Search" aria-label="Search"
                               class="form-control form-control-sm" required>
                        <button type="submit" class="btn btn-primary btn-sm" value="查询">
                            <i>Search</i>
                        </button>
                    </div>
                </form>
            </div>
            <div id="navbarCollapsed" class="collapse navbar-collapse">
                <ul class="navbar-nav ml-auto">
                    <li class="nav-item">
                        <a href="/scenery/" class="nav-link">风景</a>
                    </li>
                    <li class="nav-item">
                        <a href="/article/" class="nav-link">精致旅游</a>
                    </li>
                    <li class="nav-item dropdown position-static">
                        <a href="#" data-toggle="dropdown" class="nav-link dropdown-toggle" aria-expanded="true">
                            热门分类
                        </a>
                        <div class="dropdown-menu py-lg-0 megamenu" style="width: 100%">
                            <div class="row">
                                <div class="col-lg-9">
                                    <div class="row p-3 pr-lg-0 pl-lg-5 pt-lg-5">
                                        <div class="col-lg-3">
                                            <h6 class="text-uppercase">爸妈游</h6>
                                            <ul class="megamenu-list list-unstyled">
                                                <li class="megamenu-list-item">
                                                    <a href="#" class="megamenu-list-link">红色旅行</a>
                                                </li>
                                                <li class="megamenu-list-item">
                                                    <a href="#" class="megamenu-list-link">桂林山水</a>
                                                </li>
                                                <li class="megamenu-list-item">
                                                    <a href="#" class="megamenu-list-link">文化遗产</a>
                                                </li>
                                                <li class="megamenu-list-item">
                                                    <a href="#" class="megamenu-list-link">祈福拜佛</a>
                                                </li>
                                            </ul>
                                            <h6 class="text-uppercase">亲子游</h6>
                                            <ul class="megamenu-list list-unstyled">
                                                <li class="megamenu-list-item">
                                                    <a href="#" class="megamenu-list-link">游乐园</a>
                                                </li>
                                                <li class="megamenu-list-item">
                                                    <a href="#" class="megamenu-list-link">民俗体验</a>
                                                </li>
                                                <li class="megamenu-list-item">
                                                    <a href="#" class="megamenu-list-link">感受名校</a>
                                                </li>
                                                <li class="megamenu-list-item">
                                                    <a href="#" class="megamenu-list-link">海洋公园</a>
                                                </li>
                                            </ul>
                                            <h6 class="text-uppercase">户外活动</h6>
                                            <ul class="megamenu-list list-unstyled">
                                                <li class="megamenu-list-item">
                                                    <a href="#" class="megamenu-list-link">徒步登山</a>
                                                </li>
                                                <li class="megamenu-list-item">
                                                    <a href="#" class="megamenu-list-link">越野自驾</a>
                                                </li>
                                                <li class="megamenu-list-item">
                                                    <a href="#" class="megamenu-list-link">滑雪</a>
                                                </li>
                                                <li class="megamenu-list-item">
                                                    <a href="#" class="megamenu-list-link">骑行露营</a>
                                                </li>
                                            </ul>
                                            <h6 class="text-uppercase">人文节庆</h6>
                                            <ul class="megamenu-list list-unstyled">
                                                <li class="megamenu-list-item">
                                                    <a href="#" class="megamenu-list-link">禅修养身</a>
                                                </li>
                                                <li class="megamenu-list-item">
                                                    <a href="#" class="megamenu-list-link">宗教文化</a>
                                                </li>
                                                <li class="megamenu-list-item">
                                                    <a href="#" class="megamenu-list-link">体育赛事</a>
                                                </li>
                                                <li class="megamenu-list-item">
                                                    <a href="#" class="megamenu-list-link">深度人文</a>
                                                </li>
                                            </ul>
                                        </div>
                                        <div class="col-lg-3">
                                            <h6 class="text-uppercase">周边城市</h6>
                                            <ul class="megamenu-list list-unstyled">
                                                <li class="megamenu-list-item">
                                                    <a href="#" class="megamenu-list-link">南昌</a>
                                                </li>
                                                <li class="megamenu-list-item">
                                                    <a href="#" class="megamenu-list-link">长沙</a>
                                                </li>
                                                <li class="megamenu-list-item">
                                                    <a href="#" class="megamenu-list-link">武汉</a>
                                                </li>
                                                <li class="megamenu-list-item">
                                                    <a href="#" class="megamenu-list-link">萍乡</a>
                                                </li>
                                            </ul>
                                            <h6 class="text-uppercase">周边景点</h6>
                                            <ul class="megamenu-list list-unstyled">
                                                <li class="megamenu-list-item">
                                                    <a href="#" class="megamenu-list-link">武功山</a>
                                                </li>
                                                <li class="megamenu-list-item">
                                                    <a href="#" class="megamenu-list-link">庐山</a>
                                                </li>
                                                <li class="megamenu-list-item">
                                                    <a href="#" class="megamenu-list-link">黄鹤楼</a>
                                                </li>
                                                <li class="megamenu-list-item">
                                                    <a href="#" class="megamenu-list-link">明月山</a>
                                                </li>
                                            </ul>
                                            <h6 class="text-uppercase">热门景点</h6>
                                            <ul class="megamenu-list list-unstyled">
                                                <li class="megamenu-list-item">
                                                    <a href="#" class="megamenu-list-link">张家界</a>
                                                </li>
                                                <li class="megamenu-list-item">
                                                    <a href="#" class="megamenu-list-link">桂林</a>
                                                </li>
                                                <li class="megamenu-list-item">
                                                    <a href="#" class="megamenu-list-link">黄山</a>
                                                </li>
                                                <li class="megamenu-list-item">
                                                    <a href="#" class="megamenu-list-link">三亚</a>
                                                </li>
                                            </ul>
                                            <h6 class="text-uppercase">热门城市</h6>
                                            <ul class="megamenu-list list-unstyled">
                                                <li class="megamenu-list-item">
                                                    <a href="#" class="megamenu-list-link">武汉</a>
                                                </li>
                                                <li class="megamenu-list-item">
                                                    <a href="#" class="megamenu-list-link">南京</a>
                                                </li>
                                                <li class="megamenu-list-item">
                                                    <a href="#" class="megamenu-list-link">北京</a>
                                                </li>
                                                <li class="megamenu-list-item">
                                                    <a href="#" class="megamenu-list-link">上海</a>
                                                </li>
                                            </ul>
                                        </div>
                                        <div class="col-lg-3">
                                            <h6 class="text-uppercase">江西</h6>
                                            <ul class="megamenu-list list-unstyled">
                                                <li class="megamenu-list-item">
                                                    <a href="#" class="megamenu-list-link">婺源</a>
                                                </li>
                                                <li class="megamenu-list-item">
                                                    <a href="#" class="megamenu-list-link">井冈山</a>
                                                </li>
                                                <li class="megamenu-list-item">
                                                    <a href="#" class="megamenu-list-link">景德镇</a>
                                                </li>
                                                <li class="megamenu-list-item">
                                                    <a href="#" class="megamenu-list-link">三清山</a>
                                                </li>
                                            </ul>
                                            <h6 class="text-uppercase">湖北</h6>
                                            <ul class="megamenu-list list-unstyled">
                                                <li class="megamenu-list-item">
                                                    <a href="#" class="megamenu-list-link">武汉</a>
                                                </li>
                                                <li class="megamenu-list-item">
                                                    <a href="#" class="megamenu-list-link">神龙架</a>
                                                </li>
                                                <li class="megamenu-list-item">
                                                    <a href="#" class="megamenu-list-link">恩施</a>
                                                </li>
                                                <li class="megamenu-list-item">
                                                    <a href="#" class="megamenu-list-link">武当山</a>
                                                </li>
                                            </ul>
                                            <h6 class="text-uppercase">浙江</h6>
                                            <ul class="megamenu-list list-unstyled">
                                                <li class="megamenu-list-item">
                                                    <a href="#" class="megamenu-list-link">杭州</a>
                                                </li>
                                                <li class="megamenu-list-item">
                                                    <a href="#" class="megamenu-list-link">千岛湖</a>
                                                </li>
                                                <li class="megamenu-list-item">
                                                    <a href="#" class="megamenu-list-link">乌镇</a>
                                                </li>
                                                <li class="megamenu-list-item">
                                                    <a href="#" class="megamenu-list-link">普陀山</a>
                                                </li>
                                            </ul>
                                            <h6 class="text-uppercase">湖南</h6>
                                            <ul class="megamenu-list list-unstyled">
                                                <li class="megamenu-list-item">
                                                    <a href="#" class="megamenu-list-link">长沙</a>
                                                </li>
                                                <li class="megamenu-list-item">
                                                    <a href="#" class="megamenu-list-link">张家界</a>
                                                </li>
                                                <li class="megamenu-list-item">
                                                    <a href="#" class="megamenu-list-link">凤凰古城</a>
                                                </li>
                                                <li class="megamenu-list-item">
                                                    <a href="#" class="megamenu-list-link">株洲</a>
                                                </li>
                                            </ul>
                                        </div>
                                        <div class="col-lg-3">
                                            <h6 class="text-uppercase">云南</h6>
                                            <ul class="megamenu-list list-unstyled">
                                                <li class="megamenu-list-item">
                                                    <a href="#" class="megamenu-list-link">丽江</a>
                                                </li>
                                                <li class="megamenu-list-item">
                                                    <a href="#" class="megamenu-list-link">大理</a>
                                                </li>
                                                <li class="megamenu-list-item">
                                                    <a href="#" class="megamenu-list-link">香格里拉</a>
                                                </li>
                                                <li class="megamenu-list-item">
                                                    <a href="#" class="megamenu-list-link">丽江古城</a>
                                                </li>
                                            </ul>
                                            <h6 class="text-uppercase">广东</h6>
                                            <ul class="megamenu-list list-unstyled">
                                                <li class="megamenu-list-item">
                                                    <a href="#" class="megamenu-list-link">广州</a>
                                                </li>
                                                <li class="megamenu-list-item">
                                                    <a href="#" class="megamenu-list-link">深圳</a>
                                                </li>
                                                <li class="megamenu-list-item">
                                                    <a href="#" class="megamenu-list-link">珠海</a>
                                                </li>
                                                <li class="megamenu-list-item">
                                                    <a href="#" class="megamenu-list-link">佛山</a>
                                                </li>
                                            </ul>
                                            <h6 class="text-uppercase">福建</h6>
                                            <ul class="megamenu-list list-unstyled">
                                                <li class="megamenu-list-item">
                                                    <a href="#" class="megamenu-list-link">厦门</a>
                                                </li>
                                                <li class="megamenu-list-item">
                                                    <a href="#" class="megamenu-list-link">武夷山</a>
                                                </li>
                                                <li class="megamenu-list-item">
                                                    <a href="#" class="megamenu-list-link">福州</a>
                                                </li>
                                                <li class="megamenu-list-item">
                                                    <a href="#" class="megamenu-list-link">鼓浪屿</a>
                                                </li>
                                            </ul>
                                            <h6 class="text-uppercase">广西</h6>
                                            <ul class="megamenu-list list-unstyled">
                                                <li class="megamenu-list-item">
                                                    <a href="#" class="megamenu-list-link">桂林</a>
                                                </li>
                                                <li class="megamenu-list-item">
                                                    <a href="#" class="megamenu-list-link">北海</a>
                                                </li>
                                                <li class="megamenu-list-item">
                                                    <a href="#" class="megamenu-list-link">南宁</a>
                                                </li>
                                                <li class="megamenu-list-item">
                                                    <a href="#" class="megamenu-list-link">阳朔</a>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-3 d-none d-lg-block">
                                    <img src="{% static 'login/image/p1.jpg' %}" alt="" class="bg-image">
                                </div>
                            </div>
                        </div>
                    </li>
                    <li class="nav-item">
                        <a href="/buy/" class="nav-link">商品推荐</a>
                    </li>
                    <li class="nav-item">
                        <a href="/hot_discussion/" class="nav-link">热议</a>
                    </li>
                    <li class="nav-item">
                        <a href="/profile/" class="nav-link">{{ request.session.user_name }}，你好！</a>
                    </li>
                    <li class="nav-item">
                        <a href="/logout/" class="nav-link">登出</a>
                    </li>
                    <li class="nav-item mt-3 mt-lg-0 ml-lg-3 d-lg-none d-xl-inline-block">
                        <a href="/recommend/" class="btn btn-primary">为你推荐</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
</header>
<!--状态框-->
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog"
     aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <form method="post" action="/comment_discussion/">
                {% csrf_token %}
                <div class="modal-header">
                    <label class="modal-title" id="exampleModalCenterTitle">分享你的经历吧！</label>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label for="type" class="col-form-label">话题：</label>
                        <input type="text" class="form-control" id="type" name="type">
                    </div>
                    <div class="form-group">
                        <label for="name" class="col-form-label">主题：</label>
                        <input type="text" class="form-control" id="name" name="name">
                    </div>
                    <div class="form-group">
                        <label for="content" class="col-form-label">分享：</label>
                        <input type="text" class="form-control" id="content" name="content">
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-primary">Send message</button>
                </div>
            </form>
        </div>
    </div>
</div>
<!--首页图片-->
<section class="position-relative dark-overlay" style="overflow: hidden; padding: 180px">
    <img src="{% static 'login/image/bg3.jpg' %}" alt="" class="bg-image">
    <div class="container">
        <div class="overlay-content text-white py-lg-5" style="font-family:'Poppins',sans-serif; ">
            <h3 class="display-3 font-weight-bold text-serif text-shadow">
                {{ theme_now.type }}，永远怀念的时光
            </h3>
            <h4 class="mb-5 text-monospace">
                &nbsp &nbsp &nbsp &nbsp{{ theme_now.content }}
            </h4>
            <button type="button" class="btn btn-light" data-toggle="modal" data-target="#exampleModalCenter">
                分享你的经历吧！
            </button>
            <button type="button" class="btn btn-light" style="margin-left: 600px">喜欢：12138</button>
        </div>
    </div>
</section>
<!--瀑布流信息-->
<div class="container" style="margin-top: 50px">
    <!-- Slider main container-->
    <div class="swiper-container testimonials-slider testimonials swiper-container-horizontal">
        <!-- Additional required wrapper-->
        <div class="swiper-wrapper pt-2 pb-5 row"
             style=" transition-duration: 0ms;">
            {% for hot_discussion in hot_discussion_list %}
                <div class="swiper-slide px-3 swiper-slide-prev" data-swiper-slide-index="3"
                     style="width: 350px; margin-right: 20px; margin-bottom: 30px">
                    <div class="testimonial card rounded-lg shadow border-0">
                        <div class="testimonial-avatar"><img
                                src="{{ MEDIA_URL }}{{ hot_discussion.img.url }}"
                                alt="..." class="img-fluid"></div>
                        <div class="text">
                            <div class="testimonial-quote"><i class="fa fa-quote-right" aria-hidden="ture"></i></div>
                            <p class="testimonial-text"
                               style="height: 150px; overflow: hidden">{{ hot_discussion.content }}</p>
                            <strong>--{{ hot_discussion.author }}</strong>
                            &nbsp &nbsp
                            <span id="like" onclick="change_like(this, 'topic', {{ hot_discussion.pk }})"
                                  style="cursor: pointer; bottom: 30px; right: 20px; position: absolute;">
                                <span class="fa fa-lg fa-heart {% get_like_record 'topic' hot_discussion.pk request.session.user_pk %}"></span>
                                <span class="like_num">（{% get_like_num 'topic' hot_discussion.pk %}）</span>
                            </span>
                        </div>
                    </div>
                </div>
            {% endfor %}
        </div>
    </div>
</div>
<!--其他热议-->
<div class="container">
    <div class="row mb-2">
        {% for theme in theme_list %}
            <div class="col-md-6">
                <div class="row no-gutters border rounded overflow-hidden flex-md-row mb-4 shadow-sm h-md-250 position-relative">
                    <div class="col p-4 d-flex flex-column position-static">
                        <img src="{{ MEDIA_URL }}{{ theme.img.url }}" class="img-fluid">
                        <strong class="d-inline-block mb-2 text-primary">{{ theme.type }}</strong>
                        <h3 class="mb-0">Featured post</h3>
                        <div class="mb-1 text-muted">Nov 12</div>
                        <p class="card-text mb-auto">{{ theme.content }}</p>
                        <a href="/hot_discussion/?p1={{ theme.type }}" class="stretched-link">Continue reading</a>
                    </div>
                </div>
            </div>
        {% endfor %}
    </div>
</div>
<!--底层图片-->
<section>
    <div class="container-fluid px-0" style="padding-top: 50px; padding-bottom: 50px">
        <div class="swiper-container instagram-slider swiper-container-horizontal">
            <div class="swiper-wrapper" style="transform: translate3d(0px, 0px, 0px);">
                <div class="swiper-slide overflow-hidden swiper-slide-active" style="width: 126px;">
                    <a href="#">
                        <img src="https://d19m59y37dris4.cloudfront.net/directory/1-4-1/img/instagram/instagram-1.jpg"
                             alt=""
                             class="img-fluid hover-scale">
                    </a>
                </div>
                <div class="swiper-slide overflow-hidden swiper-slide-next" style="width: 126px;">
                    <a href="#">
                        <img src="https://d19m59y37dris4.cloudfront.net/directory/1-4-1/img/instagram/instagram-2.jpg"
                             alt=""
                             class="img-fluid hover-scale">
                    </a>
                </div>
                <div class="swiper-slide overflow-hidden" style="width: 126px;">
                    <a href="#">
                        <img src="https://d19m59y37dris4.cloudfront.net/directory/1-4-1/img/instagram/instagram-3.jpg"
                             alt=""
                             class="img-fluid hover-scale">
                    </a>
                </div>
                <div class="swiper-slide overflow-hidden" style="width: 126px;">
                    <a href="#">
                        <img src="https://d19m59y37dris4.cloudfront.net/directory/1-4-1/img/instagram/instagram-4.jpg"
                             alt=""
                             class="img-fluid hover-scale">
                    </a>
                </div>
                <div class="swiper-slide overflow-hidden" style="width: 126px;">
                    <a href="#">
                        <img src="https://d19m59y37dris4.cloudfront.net/directory/1-4-1/img/instagram/instagram-5.jpg"
                             alt=""
                             class="img-fluid hover-scale">
                    </a>
                </div>
                <div class="swiper-slide overflow-hidden" style="width: 126px;">
                    <a href="#">
                        <img src="https://d19m59y37dris4.cloudfront.net/directory/1-4-1/img/instagram/instagram-6.jpg"
                             alt=""
                             class="img-fluid hover-scale">
                    </a>
                </div>
                <div class="swiper-slide overflow-hidden" style="width: 126px;">
                    <a href="#">
                        <img src="https://d19m59y37dris4.cloudfront.net/directory/1-4-1/img/instagram/instagram-7.jpg"
                             alt=""
                             class="img-fluid hover-scale">
                    </a>
                </div>
                <div class="swiper-slide overflow-hidden" style="width: 126px;">
                    <a href="#">
                        <img src="https://d19m59y37dris4.cloudfront.net/directory/1-4-1/img/instagram/instagram-8.jpg"
                             alt=""
                             class="img-fluid hover-scale">
                    </a>
                </div>
                <div class="swiper-slide overflow-hidden" style="width: 126px;">
                    <a href="#">
                        <img src="https://d19m59y37dris4.cloudfront.net/directory/1-4-1/img/instagram/instagram-9.jpg"
                             alt=""
                             class="img-fluid hover-scale">
                    </a>
                </div>
                <div class="swiper-slide overflow-hidden" style="width: 126px;">
                    <a href="#">
                        <img src="https://d19m59y37dris4.cloudfront.net/directory/1-4-1/img/instagram/instagram-10.jpg"
                             alt="" class="img-fluid hover-scale">
                    </a>
                </div>
                <div class="swiper-slide overflow-hidden" style="width: 126px;">
                    <a href="#">
                        <img src="https://d19m59y37dris4.cloudfront.net/directory/1-4-1/img/instagram/instagram-11.jpg"
                             alt="" class="img-fluid hover-scale">
                    </a>
                </div>
                <div class="swiper-slide overflow-hidden" style="width: 126px;">
                    <a href="#">
                        <img src="https://d19m59y37dris4.cloudfront.net/directory/1-4-1/img/instagram/instagram-12.jpg"
                             alt="" class="img-fluid hover-scale">
                    </a>
                </div>
                <div class="swiper-slide overflow-hidden" style="width: 126px;">
                    <a href="#">
                        <img src="https://d19m59y37dris4.cloudfront.net/directory/1-4-1/img/instagram/instagram-13.jpg"
                             alt="" class="img-fluid hover-scale">
                    </a>
                </div>
                <div class="swiper-slide overflow-hidden" style="width: 126px;">
                    <a href="#">
                        <img src="https://d19m59y37dris4.cloudfront.net/directory/1-4-1/img/instagram/instagram-14.jpg"
                             alt="" class="img-fluid hover-scale">
                    </a>
                </div>
                <div class="swiper-slide overflow-hidden" style="width: 126px;">
                    <a href="#">
                        <img src="https://d19m59y37dris4.cloudfront.net/directory/1-4-1/img/instagram/instagram-10.jpg"
                             alt="" class="img-fluid hover-scale">
                    </a>
                </div>
                <div class="swiper-slide overflow-hidden" style="width: 126px;">
                    <a href="#">
                        <img src="https://d19m59y37dris4.cloudfront.net/directory/1-4-1/img/instagram/instagram-11.jpg"
                             alt="" class="img-fluid hover-scale">
                    </a>
                </div>
                <div class="swiper-slide overflow-hidden" style="width: 126px;">
                    <a href="#">
                        <img src="https://d19m59y37dris4.cloudfront.net/directory/1-4-1/img/instagram/instagram-12.jpg"
                             alt="" class="img-fluid hover-scale">
                    </a>
                </div>
                <div class="swiper-slide overflow-hidden" style="width: 126px;">
                    <a href="#">
                        <img src="https://d19m59y37dris4.cloudfront.net/directory/1-4-1/img/instagram/instagram-13.jpg"
                             alt="" class="img-fluid hover-scale">
                    </a>
                </div>
                <div class="swiper-slide overflow-hidden" style="width: 126px;">
                    <a href="#">
                        <img src="https://d19m59y37dris4.cloudfront.net/directory/1-4-1/img/instagram/instagram-14.jpg"
                             alt="" class="img-fluid hover-scale">
                    </a>
                </div>
            </div>
            <span class="swiper-notification" aria-live="assertive" aria-atomic="true"></span></div>
    </div>
</section>
<!--底部-->
<div class="py-6 bg-gray-200 text-muted">
    <div class="container">
        <div class="row">
            <div class="col-lg-4 mb-5 mb-lg-0">
                <div class="font-weight-bold text-uppercase text-dark mb-3">Directory</div>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing.</p>
                <ul class="list-inline">
                    <li class="list-inline-item">
                        <a href="#" target="_blank" title="twitter" class="text-muted text-hover-primary">
                            <i class="fa fa-twitter"></i>
                        </a>
                    </li>
                    <li class="list-inline-item">
                        <a href="#" target="_blank" title="facebook" class="text-muted text-hover-primary">
                            <i class="fa fa-facebook"></i>
                        </a>
                    </li>
                    <li class="list-inline-item">
                        <a href="#" target="_blank" title="instagram" class="text-muted text-hover-primary">
                            <i class="fa fa-instagram"></i>
                        </a>
                    </li>
                    <li class="list-inline-item">
                        <a href="#" target="_blank" title="pinterest" class="text-muted text-hover-primary">
                            <i class="fa fa-pinterest"></i>
                        </a>
                    </li>
                    <li class="list-inline-item">
                        <a href="#" target="_blank" title="vimeo" class="text-muted text-hover-primary">
                            <i class="fa fa-vimeo"></i>
                        </a>
                    </li>
                </ul>
            </div>
            <div class="col-lg-2 col-md-6 mb-5 mb-lg-0">
                <h6 class="text-uppercase text-dark mb-3">Rentals</h6>
                <ul class="list-unstyled">
                    <li><a href="#" class="text-muted">Rooms </a></li>
                    <li><a href="#" class="text-muted">Map on top </a></li>
                    <li><a href="#" class="text-muted">Side map </a></li>
                    <li><a href="#" class="text-muted">No map </a></li>
                    <li><a href="#" class="text-muted">Room detail </a></li>
                </ul>
            </div>
            <div class="col-lg-2 col-md-6 mb-5 mb-lg-0">
                <h6 class="text-uppercase text-dark mb-3">Pages</h6>
                <ul class="list-unstyled">
                    <li>
                        <a href="#" class="text-muted">
                            Comparison
                            <span class="badge badge-info-light ml-1">New</span>
                        </a>
                    </li>
                    <li>
                        <a href="#" class="text-muted">
                            Team
                            <span class="badge badge-info-light ml-1">New</span>
                        </a>
                    </li>
                    <li><a href="#" class="text-muted">Contact </a></li>
                    <li><a href="#" class="text-muted">Pricing </a></li>
                    <li><a href="#" class="text-muted">Text page </a></li>
                    <li><a href="#" class="text-muted">F.A.Q.s </a></li>
                    <li><a href="#" class="text-muted">Coming soon </a></li>
                </ul>
            </div>
            <div class="col-lg-4">
                <h6 class="text-uppercase text-dark mb-3">Daily Offers &amp; Discounts</h6>
                <p class="mb-3"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. At itaque temporibus.</p>
                <form action="#" id="newsletter-form">
                    <div class="input-group mb-3">
                        <input type="email" placeholder="Your Email Address" aria-label="Your Email Address"
                               class="form-control bg-transparent border-dark border-right-0">
                        <div class="input-group-append">
                            <button type="submit" class="btn btn-outline-dark border-left-0">
                                <i class="fa fa-paper-plane text-lg"></i>
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<!--点击喜欢-->
<script type="text/javascript">
    function change_like(obj, content_type, object_id) {
        // 判断obj中是否包含active的元素，用于判断当前状态是否为激活状态
        var is_like = obj.getElementsByClassName('active').length == 0
        $.ajax({
            url: '/like_up/',
            // 为了避免加入csrf_token令牌，所以使用GET请求
            type: 'GET',
            // 返回的数据用于创建一个点赞记录
            data: {
                content_type: content_type,
                object_id: object_id,
                is_like: is_like,
            },
            cache: false,
            success: function (data) {
                console.log(data);
                if (data['status'] == 'SUCCESS') {
                    // 更新点赞状态
                    // 通过class找到对应的标签
                    var record = $(obj.getElementsByClassName('fa'));
                    if (is_like) {
                        record.addClass('active')
                    } else {
                        record.removeClass('active')
                    }
                    // 更新点赞数量
                    var like_num = $(obj.getElementsByClassName('like_num'));
                    like_num.text('（' + data['like_num'] + '）')

                } else {
                    // 以弹窗的形式显示错误信息
                    alert(data['message'])
                }
            },
            error: function (xhr) {
                console.log(xhr)
            }
        });
        return false;
    };
</script>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</body>
</html>